<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--公共的head-->
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">Document</title>
    <!--semantic-ui的cdn引入-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <!--typo.css引入-->
    <link rel="stylesheet" href="..\static/css/typo.css" th:href="@{/css/typo.css}">
    <!--prism引入-->
    <link rel="stylesheet" href="..\static/lib/prism/prism.css" th:href="@{lib/prism/prism.css}">
    <!--tocbot引入-->
    <link rel="stylesheet" href="..\static/lib/tocbot/tocbot.css" th:href="@{lib/tocbot/tocbot.css}">
    <!--animate.css引入-->
    <link rel="stylesheet" href="..\static/css/animate.css" th:href="@{/css/animate.css}">
    <!--引入Editor_md的css-->
    <link rel="stylesheet" href="..\..\static\lib\Editor_md\css\editormd.min.css" th:href="@{/lib/Editor_md/css/editormd.min.css}">
    <!--引入个人定义的css-->
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>
    <!--公共的导航部分-->
    <nav th:fragment="menu" class="ui inverted attached segment transparent_header_and_bottom">
        <div class="container">
            <div class="ui inverted stackable menu">

                <h2 class="ui teal header item m-padding-up-dowm-min">MyWeb</h2>

                <a href="/" class="item" th:href="@{/}">
                    <i class="home icon"></i>
                    首页
                </a>

                <a href="/" class="item" th:href="@{/types/-1}">
                    <i class="edit icon"></i>
                    分类
                </a>

                <a href="/" class="item" th:href="@{/pictures}">
                    <i class="announcement icon"></i>
                    照片墙
                </a>

                <a href="/" class="item" th:href="@{/about_me}">
                    <i class="print icon"></i>
                    关于我
                </a>

                <!--搜索栏-->
                <div class="right item">
                    <form name="search" th:action="@{/search}" method="post">
                        <div class="ui icon inverted transparent input">
                            <i class="search link icon" onclick="document.forms['search'].submit()"></i>
                            <input type="text" placeholder="搜索" name="query" th:value="${query}">
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </nav>

    <!--公共的footer-->
    <footer th:fragment="footer" class="ui inverted center aligned vertical segment m-footer-padding-up-dowm-min transparent_header_and_bottom">
        <div class="container">
            <!--grid:横向分成16份,底下的元素为3+3+3+7-->
            <div class="ui divided  inverted grid">

                <div class="three wide column">
                    <h4 class="ui inverted header">二维码</h4>
                    <img src="..\static\images\二维码.png"  th:src="@{/images/二维码.png}" style="width: 80px;">
                </div>

                <div class="three wide column">
                    <h4 class="ui inverted header">个人博客</h4>
                    <div class="ui inverted list link">
                        <a href="#" class="item">1.0 xxx</a>
                        <a href="#" class="item">2.0 xxx</a>
                        <a href="#" class="item">3.0 xxx</a>
                    </div>
                </div>

                <div class="three wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted list link">
                        <a href="#" class="item">微信:13776710591</a>
                        <a href="#" class="item">QQ:2899847639</a>
                        <a href="#" class="item">GitHub:xxxxxxx</a>
                    </div>
                </div>

                <div class="seven wide column">
                    <h4 class="ui inverted header">个人博客</h4>
                    <p>
                        emmm,你要说点什么
                    </p>
                </div>
            </div>

            <!--一条线-->
            <div class="ui inverted section divider"></div>
            <p>emmm,你要说点什么</p>

        </div>
    </footer>

</body>
</html>